<!-- 播放页头部-->
<template>
  <div class="breadcrumb-wrapper flex-center-wrap text-ess-1">
    <div class="breadcrumb-back" @click="goback">
      <zl-icon
        icon="icon-fanhui"
        :icon-style="{ width: '24px', height: '24px', color: '#fff' }"
      ></zl-icon>
    </div>
    <div class="text-ess-1 flex-wrap">
      <template v-for="(item, index) in courseCrumb">
        <template v-if="item">
          <div
            :key="index"
            class="text-ess-1 breadcrumb-item"
            :class="{ 'breadcrumb-item-cur': index === courseCrumb.length - 1 }"
          >
            {{ item }}
          </div>
          <div
            :key="index"
            v-if="index !== courseCrumb.length - 1"
            class="text-ess-1 breadcrumb-separator"
          >
            >
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<script>
import zlIcon from '@/components/zlIcon.vue'

export default {
  components: {
    'zl-icon': zlIcon
  },

  data() {
    return {}
  },
  computed: {
    courseMkInfo() {
      return this.$store.state.play.courseMkInfo || {}
    },
    courseInfo() {
      return this.$store.state.play.courseInfo || {}
    },
    playingSection() {
      return this.$store.state.play.playingSection || {}
    },
    selectInfo() {
      return this.$store.state.play.selectInfo || {}
    },
    courseCrumb() {
      let arr = []
      arr.push(this.courseInfo.profession_name)
      arr.push(this.courseInfo.course_name)
      arr.push(this.selectInfo.course_section_name)
      return arr
    }
  },
  methods: {
    // 返回
    goback() {
      if (window.history.length === 1) {
        this.goTo('/personal/index.html?name=1', { replace: true })
      } else {
        // 清除notfound页历史记录
        // history.replaceState(null, null)
        history.back()
      }
    }
  }
}
</script>
<style scoped>
.breadcrumb-wrapper {
  height: 54px;
  font-size: 16px;
  width: calc(100vw - 860px);
}
.breadcrumb-back {
  margin-right: 10px;
  cursor: pointer;
  font-size: 0;
}
.breadcrumb-item {
  color: #8c8c8c;
  line-height: 24px;
  /* width: 150px; */
}

.breadcrumb-item-cur {
  color: #e6e6e6;
}
.breadcrumb-separator {
  color: #8c8c8c;
  /* width: 150px; */
}
</style>
